import React, { useState } from 'react';
import { Layout, Breadcrumb, Card, List, Avatar, Button, Badge, Space } from 'antd';
import { Content } from 'antd/es/layout/layout';
import { BellOutlined, CheckCircleOutlined, WarningOutlined, InfoCircleOutlined } from '@ant-design/icons';

const Notifications = () => {
  const [notifications, setNotifications] = useState([
    { id: 1, type: 'info', title: '系统更新', content: '系统将于今晚12点进行维护升级', time: '2小时前', read: false },
    { id: 2, type: 'warning', title: '库存预警', content: '阿莫西林胶囊库存不足，请及时补货', time: '5小时前', read: false },
    { id: 3, type: 'success', title: '订单完成', content: '订单#12345已完成发货', time: '1天前', read: true },
    { id: 4, type: 'info', title: '新功能上线', content: '新增报表功能现已上线', time: '2天前', read: true },
  ]);

  const unreadCount = notifications.filter(n => !n.read).length;

  const markAsRead = (id: number) => {
    setNotifications(notifications.map(n => 
      n.id === id ? { ...n, read: true } : n
    ));
  };

  const markAllAsRead = () => {
    setNotifications(notifications.map(n => ({ ...n, read: true })));
  };

  const getIconByType = (type: string) => {
    switch (type) {
      case 'success': return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
      case 'warning': return <WarningOutlined style={{ color: '#faad14' }} />;
      case 'info': return <InfoCircleOutlined style={{ color: '#1890ff' }} />;
      default: return <BellOutlined />;
    }
  };

  const getColorByType = (type: string) => {
    switch (type) {
      case 'success': return 'green';
      case 'warning': return 'orange';
      case 'info': return 'blue';
      default: return 'default';
    }
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Layout className="site-layout">
        <Content style={{ margin: '16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>通知</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360, background: '#fff' }}>
            <Card 
              title={
                <Space>
                  <span>通知中心</span>
                  <Badge count={unreadCount} />
                </Space>
              } 
              bordered={false}
              extra={
                <Button 
                  type="primary" 
                  onClick={markAllAsRead}
                  disabled={unreadCount === 0}
                >
                  全部标记为已读
                </Button>
              }
            >
              <List
                itemLayout="horizontal"
                dataSource={notifications}
                renderItem={item => (
                  <List.Item
                    actions={!item.read ? [<Button type="link" onClick={() => markAsRead(item.id)}>标记为已读</Button>] : []}
                  >
                    <List.Item.Meta
                      avatar={<Avatar icon={getIconByType(item.type)} style={{ backgroundColor: 'transparent' }} />}
                      title={
                        <Space>
                          <span>{item.title}</span>
                          {!item.read && <Badge status={getColorByType(item.type) as any} />}
                        </Space>
                      }
                      description={
                        <div>
                          <div>{item.content}</div>
                          <div style={{ fontSize: '12px', color: '#999' }}>{item.time}</div>
                        </div>
                      }
                    />
                  </List.Item>
                )}
              />
            </Card>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Notifications;